
import * as PIXI from 'pixi.js';
import Image from 'components/image';
import Rect from 'components/rect';
import FrameList from 'components/frameList';
import injectStore from 'components/injectStore';
import waterGrass from 'common/const/waterGrass';
import posterSrc from 'common/asset/img/items/poster.png';
import sunshineSrc from 'common/asset/img/background/sunshine.png';
import handSlideSrc from 'common/asset/img/background/handSlide.png';
import chestOpen from 'common/asset/img/boxes/chestOpen.png';
import goldSrc from 'common/asset/img/background/gold.png';
import {findGameApp} from 'common/utils';

import ghostCoverSrc from 'common/asset/img/items/poster2.png';

const { Container } = PIXI;

@injectStore
export default class Background {
  constructor({CONST, store, parent}) {

    this.CONST = CONST;
    this.store = store;
    this.parent = parent;
    this.container = new Container();

    this._renderBg();

    this.container.interactive = true;

    this.container
      .on('pointerdown', this.onMoveStart)
      .on('pointerup', this.onMoveEnd)
      .on('pointerupoutside', this.onMoveEnd)
      .on('pointermove', this.onMove);

    // return this.container;
  }

  _renderBg = () => {
    const { src, height } = this.CONST;

    let bg = new Image({src, height, left: 0, top: 0, isAdapt: true});
    this.container.addChild(bg);

    let post = new Image({src: posterSrc, width: 235, height: 360, top: 292, left: 119});
    this.container.addChild(post);


    this._renderClickBoxes();

    let waterGrasses = new FrameList({list: waterGrass.list, left: 0, top: 0, height, speed: 0.1});
    this.container.addChild(waterGrasses);

    let sunshine = new Image({src: sunshineSrc, left: 0, top: 0, height});
    this.container.addChild(sunshine);
    sunshine.alpha = 0;

    let gold = new Image({src: goldSrc, left: 0, top: 569, width: 342, height: 534});
    this.container.addChild(gold);
    gold.alpha = 0;

    this.handsSlide = new Image({src: handSlideSrc, top: 750, width: 170, height: 146});
    this.handsSlide.x = (this.container.width - this.handsSlide.width) / 2;
    this.container.addChild(this.handsSlide);
    gold.alpha = 0;

    this.sun = 'bright';

    this.selectDoodsTimer = setInterval(() => {

      if (this.sun === 'bright') {
        sunshine.alpha += 0.025;
        gold.alpha += 0.03;
        if (sunshine.alpha >= 0.5) this.sun = 'dark';
      } else {
        sunshine.alpha -= 0.025;
        gold.alpha -= 0.03;
        if (sunshine.alpha <= 0) this.sun = 'bright';
      }

    }, 40);

    this.container.scale.x = window.CFG.view.height / 1334;
    this.container.scale.y = window.CFG.view.height / 1334;

    this.container.x = - (this.container.width - 750) / 2;


  };

  onMoveStart = (event) => {
    this.lastX = event.data.getLocalPosition(this.container.parent).x;
    this.dragging = true;
  };

  onMoveEnd = () => {
    this.dragging = false;
    this.container.data = null;
  };

  onMove = (event) => {
    if (this.handsSlide) {
      this.container.removeChild(this.handsSlide);
      this.handsSlide = null;
    }
    if (this.dragging) {

      let newPosition = event.data.getLocalPosition(this.container.parent);
      let moveX = newPosition.x - this.lastX;
      let nextX = this.container.x + moveX;

      if (nextX <= 0 && nextX >= -(this.container.width - 750)) {
        this.container.x = nextX;
      }
      this.lastX = newPosition.x;

    }
  };

  _renderClickBoxes() {

    this.store.boxes.forEach(item => {

      const { key, height, left, src, top, width } = item;

      let box = null;
      let ghostCover = null;

      if (src instanceof Array) {
        box = new FrameList({list: src, speed: 1.5, height, left, top, width});
      } else if (src) {
        box = new Image({height, left, src, top, width});
      } else {
        box = new Rect({height, left, top, width});

      }

      if (item.key === 'ghost') {
        ghostCover = new Image({src: ghostCoverSrc, height: 481, left: 70, top: 210, width: 331});
      }

      box.interactive = true;

      if (item.openKey) { // 点击标记物品拦物品

        box.on('pointerdown', (event) => {
          this.pointerX = event.data.getLocalPosition(this.container.parent).x;
        }).on('pointerup', (event) => {

          if (Math.abs(event.data.getLocalPosition(this.container.parent).x - this.pointerX) < 5) {

            const { itemFloor } = findGameApp(this).scene;

            if (item.allowOpen) {

              if (item.key === 'octopus') {
                this.parent._renderModal(item, () => {
                  const { left, top } = item;
                  // 使用钥匙
                  item.parent.useItem(item.openKey);
                  // 获得新钥匙
                  item.parent.getItem(item.getItems);

                  this.parent.background.container.removeChild(this.parent.background.wantOpenBox);

                  let octopusOpenImg = new Image({left, src: item.src, top, width: item.width, height: item.height});
                  this.parent.background.container.addChild(octopusOpenImg);
                });
              } else if (item.key === 'chest') {
                this.parent._renderModal(item, () => {
                  const { left, top } = item;
                  this.parent.background.container.removeChild(this.parent.background.wantOpenBox);

                  let woodenBoxOpenImg = new Image({left, src: chestOpen, top});
                  this.parent.background.container.addChild(woodenBoxOpenImg);
                });
              } else {
                this.store.items.forEach(n => {
                  if (n.key === item.openKey) {
                    n.update('isSelected', true);
                  } else {
                    n.update('isSelected', false);
                  }
                });

                // 弱提示
                itemFloor._renderHasUseKeyCue();
              }



              this.wantOpenBox = box;

              itemFloor._renderItem();



            } else {

              itemFloor._renderUnOpenPrompt({text: item.unOpenTexts});
            }
          }

        });



        // box.on('tap', () => {
        //   const { itemFloor } = findGameApp(this).scene;
        //
        //   if (item.allowOpen) {
        //     this.store.items.forEach(n => {
        //       if (n.key === item.openKey) {
        //         n.update('isSelected', true);
        //       } else {
        //         n.update('isSelected', false);
        //       }
        //     });
        //
        //     this.wantOpenBox = box;
        //
        //     itemFloor._renderItem();
        //
        //   } else {
        //
        //     itemFloor._renderUnOpenPrompt({text: item.unOpenTexts});
        //   }
        //
        // });
      } else if (item.openKey === null) { // 铁棒变大变小

        box.on('pointerdown', (event) => {
          this.pointerX = event.data.getLocalPosition(this.container.parent).x;
        }).on('pointerup', (event) => {
          if (Math.abs(event.data.getLocalPosition(this.container.parent).x - this.pointerX) < 5) {
            const { _renderModal } = findGameApp(this).scene;
            _renderModal(item, () => {
              this.container.removeChild(box);
            });
          }
        });
        // box.on('tap', () => {
        //   const { _renderModal } = findGameApp(this).scene;
        //   _renderModal(item, () => {
        //     this.container.removeChild(box);
        //   });
        // });

      } else { // 其他的展示box

        box.on('pointerdown', (event) => {
          this.pointerX = event.data.getLocalPosition(this.container.parent).x;
        }).on('pointerup', (event) => {
          if (Math.abs(event.data.getLocalPosition(this.container.parent).x - this.pointerX) < 5) {
            this.parent._renderModal(item);
          }
        });

        // box.on('tap', () => {
        //   this.parent._renderModal(item);
        //   // this.parent.itemFloor._renderUnOpenPrompt({text: item.openTexts});
        // });

      }

      if (ghostCover) {
        this.container.addChild(ghostCover);
        this.ghostCover = ghostCover;
      }
      this.container.addChild(box);
    });

  };

};
